<template>
  <!--  单组计算第四个图 回转单一共用-->

  <div>
    <div ref="chart" style="width: 100%; height: 400px"></div>
    <!--    <div>{{this.caculateResult.NOx_generation}}</div>-->
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

export default {
  props: {
    caculateResult: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  setup(props) {
    const chart = ref(null);

    onMounted(() => {
      const chartInstance = echarts.init(chart.value);
      const rawData = props.caculateResult.diffTempAcid.data;
      let arry1 = []
      rawData[Object.keys(rawData)[0]].T.forEach((value,index)=>{
        arry1[index] = ( value )
        // arry1[index] = (parseInt( value * 100 ) / 100).toFixed(6)

      })
      // console.log( "rawData[Object.keys(rawData)[0]].T",rawData[Object.keys(rawData)[0]].T)
      console.log( "arry1",arry1)


      // const xData = Math.floor(rawData[Object.keys(rawData)[0]].T).toFixed(2);// 获取第一个键对应的数组元素
      const xData = arry1
      const seriesData = Object.keys(rawData).map((key, index) => ({
        // name: key, // 图例显示的名称
        name: `${parseInt(key.substring(6)) - 273}℃`, // 提取数字并减去273，然后添加℃
        type: "line",
        data: rawData[key].result,
        label: {
          formatter: `{c${index}}`,
        },
        itemStyle: {
          color: `rgb(${(index + 1) * 50}, ${(index + 1) * 80}, ${
            (index + 1) * 100
          })`,
        },
        symbol: "none", // 隐藏数据点


      }));

      const option = {
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            var tooltipText = '时间：' + params[0].name + 'min' + '<br>'; // 初始化提示框文本
            // 遍历数据项，添加系列名称、颜色和数据项名称
            for (var i = 0; i < params.length; i++) {
              var seriesName = params[i].seriesName; // 获取系列名称
              var color = params[i].color; // 获取数据项颜色
              var dataName = params[i].value; // 获取数据项名称
              tooltipText += '<span style="color:' + color + '">&#9679;</span> ' + seriesName + ' : ' + dataName + '<br>';
            }
            return tooltipText;
          },

          // formatter: "铀浓度：{c0} (g·L^-1)",
          // formatter: function(params) {
          //   var result = '';
          //   for (var i = 0; i < params.length; i++) {
          //     result += '溶解第: ' + params[i].name +' min' + '<br />';
          //     result += '硝酸浓度 : ' +(parseInt( params[i].value * 100 ) / 100).toFixed(6)  + ' mol/L' + '<br />';
          //   }
          //   return result;
          // },
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: '#fff', // 悬浮框背景色
          borderColor: '#409EFF', // 悬浮框边框颜色
          borderWidth: 1, // 悬浮框边框宽度
          textStyle: { // 悬浮框文字样式
            color: '#000',
            fontSize: 12
          }

        },
        xAxis: {
          type: "category",
          name: "溶解时间/min",
          // data: rawData.TempIs348.T
          data: xData,
          axisLabel: {
            formatter: function(value) {
              return parseFloat(value).toFixed(2); // 保留两位小数
            }
          }
        },
        yAxis: {
          type: "value",
          name: "硝酸浓度/(g·L^-1)",
        },
        legend: {}, // 添加图例
        series: seriesData,
      };

      chartInstance.setOption(option);
    });

    return {
      chart,
    };
  },
};
</script>

<style>
/* 添加你的样式 */
</style>
